<template>
  <div class="turnoutCurrency_wrap">
    <headTop :headClass="'white_header'">
      Turn out the coin
      <span slot="right" @click="$router.push({path: 'turnoutRecord'})">Record</span>
    </headTop>
    <div class="out_wrap">
      <label for="out_num" class="out_txt">Turn out the number of coins</label>
      <span class="line"></span>
      <input type="number" id="out_num" placeholder="Please input the number of coins transferred" v-model="num">
      <p class="total">Total current currency:{{total}}</p>
    </div>
    <div class="btn_wrap">
      <div class="public_btn" @click="sure">Check out</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'turnoutCurrency',
  data () {
    return {
      num: '',
      total: ''
    };
  },
  methods: {
    sure () {
      if (!this.HasData(this.num)) {
        this.Toast('Please input the number of coins transferred.');
      } else if (parseFloat(this.num) > parseFloat(this.total)) {
        this.Toast('Insufficient quantity');
      } else if (parseFloat(this.num) <= 0) {
        this.Toast('Illegal quantity transferred');
      } else if (!/^[1-9]\d*$/.test(this.num)) {
        this.Toast('please enter an integer');
      } else {
        this.isSetPwd();
      }
    },
    // Currency treasure account information
    reqInfo () {
      this.axios.get('index/users/bb_balance').then(({data}) => {
        if (data.status === 200) {
          this.total = data.data.currency_treasure;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Transfer interface
    reqData () {
      this.ShowPassword(() => {
        this.axios.get('index/transfer/currency_out', {
          params: {
            money: this.num,
            pay_password: this.passWord
          }
        }).then(({data}) => {
          if (data.code === 200) {
            this.Toast(data.message);
            this.num = '';
            setTimeout(() => {
              this.$router.replace({path: 'turnoutRecord'});
            }, 1000);
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          this.reqData();
        } else {
          this.Modal('Set transaction password', 'You need to set up the transaction password before purchasing operation. Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    }
  },
  computed: {
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  mounted () {
    this.reqInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .turnoutCurrency_wrap{
    padding: 110px 0px;
    background: #f4f5f7;
    .header_wrap {
      span {
        color: #ff9e27;
      }
    }
    .out_wrap {
      background: #fff;
      padding: 0 26px 0 34px;
      margin-bottom: 80px;
      position: relative;
      .out_txt {
        height: 86px;
        line-height: 86px;
        font-size: 28px;
        color: #999999;
        display: block;
      }
      .line {
        display: inline-block;
        width: 2Px;
        height: 50px;
        background: #afafaf;
        position: absolute;
        top: 38%;
        // top: 16.5%;
        left: 6%;
      }
      input {
        width: 100%;
        height: 102px;
        line-height: 102px;
        font-size: 60px;
        color: #222222;
        border-bottom: 1Px solid #e6e6e6;
        text-indent: 35px;
        &::placeholder {
          font-size: 30px;
          color: #999;
          line-height: normal;
          line-height: 102px;
        }
      }
      .total {
        font-size: 107px;
        line-height: 107px;
        color: #666666;
        font-size: 28px;
      }
    }
    .btn_wrap {
      text-align: center;
      .public_btn {
        background: linear-gradient(180deg,#ffc507,#ff9f26);
        font-size: 30px;
        color: #222;
        box-shadow: 0px 0px 10px 10px #f6ebd2;
      }
    }
  }
</style>
